<template>
  <div class="chat-frame">
    <img src="../../public/vite.svg" alt="头像" width="50" height="50">
    <div class="right">
      <tiny-input
          type="textarea"
          v-model="inputComment"
          resize="none"
          placeholder="输入评论"
      >
      </tiny-input>
      <div class="bottom">
        <div class="emoji">
          <smiling-face theme="outline" size="18" fill="#333" :strokeWidth="2"/>
          <span>表情</span>
        </div>
        <button>发表评论</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {Input as TinyInput} from '@opentiny/vue'
import {SmilingFace} from '@icon-park/vue-next'

const inputComment = ref('')

</script>

<style lang="less" scoped>
.chat-frame {
  .right {
    .bottom {
      .emoji:hover {
        color: #949494;
      }

      .emoji {
        .i-icon {
          margin-right: 5px;
        }

        display: flex;
        align-items: center;
        font-size: 13px;
        cursor: pointer;
      }

      display: flex;
      margin-top: 15px;
      align-items: center;
      justify-content: space-between;
    }
    flex: 1;
    margin-left:50px;
  }

  margin-top: 20px;
  display: flex;
  //justify-content: space-between;
}
</style>
